<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_为什么要有组件化</title>
</head>
<body>
    <!-- 当 dom 里面出现了很多重复一样的 html 结构时,就要考虑将它抽离成组件,简化代码 -->
    <div id="app">
        <h3>标题</h3>
        <p>段落</p>

        <h3>标题</h3>
        <p>段落</p>

        <h3>标题</h3>
        <p>段落</p>

        <h3>标题</h3>
        <p>段落</p>

        <h2>下面是利用组件改进上面重复的结构:</h2>
        <test-cpn></test-cpn>
    </div>

    <div id="app2">
        <test-cpn></test-cpn>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    //方式一: 全局组件,可供多个 Vue 实例共用
    Vue.component('testCpn',{
        template: `<div><h3>标题</h3><p>段落</p></div>`
    })

    new Vue({
        el: '#app',
    })

    new Vue({
        el: '#app2'
    })
</script>
</html>